<template>
  <div id="container">
    <a-config-provider :locale="locale">
      <nuxt />
    </a-config-provider>
  </div>
</template>

<script>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import zh_TW from 'ant-design-vue/lib/locale-provider/zh_TW'
import en_US from 'ant-design-vue/lib/locale-provider/en_US'

import moment from 'moment'
import 'moment/locale/zh-cn'
import 'moment/locale/zh-tw'
import 'moment/locale/en-gb'
moment.locale('zh-cn')

const locales = {
  zh_CN,
  zh_TW,
  en_US
}

const momentLocales = {
  zh_CN: 'zh-cn',
  zh_TW: 'zh-tw',
  en_US: 'en-gb'
}

export default {
  name: 'DefaultLayouts',
  computed: {
    locale() {
      const lang = this.$store.state.i18n.locale
      moment.locale(momentLocales[lang])
      return locales[lang]
    }
  },
  watch: {
    '$store.state.i18n.locale': function(lang) {
      this.$i18n.locale = lang
    }
  },
  head() {
    return {
      title: this.$t(this.$route.meta.title)
    }
  }
}
</script>
